Olá pessoal…
Hoje vou mostrar para vocês, como configurar o Mapa do Brasil em uma página web.
Recentemente tive a necessidade de colocar um Mapa do Brasil em uma página em PHP, e achei um exemplo no site codepen.io do Fabio Godoy, onde tudo indica que é um exemplo do Bom Negócio.
Escolhendo um estado
Para exemplificar no carregamento da página, adicionei parametrizações para depois flexibilizar o código, inclusive ao clicar, sempre ficar posicionado no fim do mapa.
O mapa tem um funcionamento simples, onde ao posicionar com o mouse, ele muda de cor o estado selecionado.
Posicionando o cursor do mouse em um estado
E ao clicar, ele mostra o estado clicado abaixo.
Estado escolhido
Alterei também, para que quando fosse via Mobile, mudasse o tamanho no quadro apresentado. Abaixo o código fonte desenvolvido.
Exemplo Mapa do Brasil
Referências:
– codepen.io
Bom pessoal, por hoje é só.
Abraços e até a próxima.
Muito obrigada, resolvi um problema do cliente,
Eu que agradeço pelo comentário.
quando eu clico no estado aparece um quadrado toda hora no RS
Provavelmente é a borda do clique, talvez você consegue tirar via CSS.
tem como aumentar o tamanho do mapa ? no celular ficou pequeno
Você consegue alterar o tamanho na linha 202 do código, tente definir o tamanho.
No meu caso, o mapa na versão mobile ficou grande
Bom dia Alisson.
Revise a linha 202, se for o caso, diminua a largura e altura.
Além disso, revise o trecho da linha 54 a 61, pode ser que seu modelo mobile não esteja na lista.
Abraços.